What?

Fixes an issue we've observed with the jetpack-mu-wpcom code block override that causes code content to be cleared out when another user loads the editor:

This in particular resulted from the custom code block accessing a RichText attribute value via attributes.content?.text. In trunk, our CRDT code caused the attributes.content value to be a string instead of RichTextData so the .text property failed to exist.

Why?

The Jetpack enhanced code block (and any block whose edit component accesses content.text and expects a rich text object) breaks when a second user joins a collaborative session. The CRDT serialization path correctly converts RichTextData to strings when writing to the Y.Doc (serializeAttributeValue), but the deserialization path has no corresponding conversion back.

This meant blocks received from CRDT had content as a raw string, so content.text (a RichTextData getter) was undefined. The edit component then initialized with empty content and wrote that back, wiping the block's content entirely.

How?

Added deserializeBlockAttributes as the inverse of the existing serialization path. When getPostChangesFromCRDTDoc extracts blocks from the CRDT document, it now converts any rich-text string attributes back to RichTextData via RichTextData.fromHTMLString(). This ensures block edit components receive the same attribute types regardless of whether blocks were created locally or arrived via CRDT sync.

Testing Instructions

Unit test

npm run test:unit -- --testPathPattern='core-data/src/utils/test/crdt' --testNamePattern='rich-text block attributes'

You can see the test failing before the fix here: https://github.com/WordPress/gutenberg/actions/runs/23220557291/job/67491959921?pr=76607.

Manual testing

Manual testing with jetpack-mu-wpcom-specific blocks is difficult locally, so I've included test files that can be used locally to reproduce the same issue. Here's what the reproduction looks like using the "RTC Test Code Block":

Test code block with fix disabled to show local reproduction

Here's how to run this locally to reproduce the bug against trunk:

1. Enable RTC via Settings -> Writing -> "Enable real-time collaboration" checkbox.

2. Create a rtc-test-code-block/ folder at the root of your gutenberg repository. Add these two files:

   rtc-test-code-block.php

   <?php
   /**
    * Plugin Name: RTC Test Code Block
    * Description: A minimal block that reproduces the Jetpack code block's RTC sync
    *              issue. The edit component accesses content.text (a RichTextData
    *              getter), which fails when CRDT delivers content as a plain string.
    */
   
   add_action( 'init', function () {
   	register_block_type(
   		'test/rtc-code-block',
   		array(
   			'api_version' => 3,
   			'title'       => 'RTC Test Code Block',
   			'category'    => 'text',
   			'attributes'  => array(
   				'content' => array(
   					'type'                          => 'rich-text',
   					'source'                        => 'rich-text',
   					'selector'                      => 'code',
   					'__unstablePreserveWhiteSpace'  => true,
   					'role'                          => 'content',
   				),
   			),
   		)
   	);
   } );
   
   add_action( 'enqueue_block_editor_assets', function () {
   	wp_enqueue_script(
   		'rtc-test-code-block',
   		plugins_url( 'rtc-test-code-block.js', __FILE__ ),
   		array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-rich-text' ),
   		'1.0',
   		true
   	);
   } );

   rtc-test-code-block.js

   /**
    * Minimal block reproducing the Jetpack enhanced code block's RTC bug.
    *
    * The edit component reads `content.text` on mount (a RichTextData getter)
    * and writes derived state back. When CRDT delivers `content` as a plain
    * string, `.text` is undefined and the content is overwritten with "".
    */
   ( function () {
   	const { createElement: el, useEffect, useRef, useCallback } = wp.element;
   	const { registerBlockType } = wp.blocks;
   	const { useBlockProps } = wp.blockEditor;
   	const { RichTextData } = wp.richText;
   
   	registerBlockType( 'test/rtc-code-block', {
   		title: 'RTC Test Code Block',
   		category: 'text',
   		icon: 'editor-code',
   		attributes: {
   			content: {
   				type: 'rich-text',
   				source: 'rich-text',
   				selector: 'code',
   				role: 'content',
   			},
   		},
   
   		edit: function Edit( { attributes, setAttributes } ) {
   			const codeRef = useRef( null );
   			const didInit = useRef( false );
   
   			// On mount, read content.text and initialise internal state.
   			// Same pattern as Jetpack CodeMirror (block-edit-function.tsx:343):
   			//   doc: attributes.content?.text ?? ''
   			useEffect( () => {
   				if ( didInit.current ) {
   					return;
   				}
   				didInit.current = true;
   
   				const text = attributes.content?.text ?? '';
   
   				// Populate the editable element with the initial text.
   				if ( codeRef.current ) {
   					codeRef.current.textContent = text;
   				}
   
   				// Write it back as RichTextData, same as Jetpack's updateCode().
   				setAttributes( {
   					content: RichTextData.fromPlainText( text ),
   				} );
   			}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
   
   			const onInput = useCallback( () => {
   				if ( codeRef.current ) {
   					const text = codeRef.current.textContent || '';
   					setAttributes( {
   						content: RichTextData.fromPlainText( text ),
   					} );
   				}
   			}, [ setAttributes ] );
   
   			return el(
   				'pre',
   				useBlockProps(),
   				el( 'code', {
   					ref: codeRef,
   					contentEditable: true,
   					suppressContentEditableWarning: true,
   					onInput,
   					style: {
   						outline: 'none',
   						whiteSpace: 'pre-wrap',
   						minHeight: '1em',
   						display: 'block',
   					},
   				} )
   			);
   		},
   
   		save( { attributes } ) {
   			return el(
   				'pre',
   				useBlockProps.save(),
   				el( 'code', null, attributes.content?.toHTMLString?.() ?? '' )
   			);
   		},
   	} );
   } )();

   These implement a block that reads from content via attributes.content?.text and writes it back to the block attributes, replicating the same bug.

3. Add the "plugin" to your .wp-env.json:

   {
       "$schema": "./schemas/json/wp-env.json",
       "testsEnvironment": false,
       "core": "WordPress/WordPress",
   -   "plugins": [ "." ],
   +   "plugins": [ ".", "./rtc-test-code-block" ],
       /* ... */
   }

4. Activate the plugin and open a draft post. Insert a "RTC Test Code Block", a heading block, and another "RTC Test Code Block", each with content.

5. Open the same post in a second browser.

6. After the collaborator list appears, the second user should see the code block contents cleared out.

Try again on this branch (fix/rich-text-deserialization) and the content should stay.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Used for: Diagnosing the CRDT serialization problem and implementing the fix.